<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-2.1.1.min.js"></script>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body style="background-color: #F4F4F4;">
		<!-- 内容头部 -->
		<div class="ch">
			<iframe align="center" width="100%" height="75px" src="html/User/UserNavigation.html" frameborder="no" scrolling="no"
			 border="0"></iframe>
		</div>
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-10 column" style="border: 1px solid #999999;">
					<div class="row clearfix">
						<div class="col-md-12 column" style="text-align: center;">
							<h3>礼物清单</h3>
						</div>
					</div>
					<div class="row clearfix">
						<div class="col-md-12 column" style="height: 40px;font-size: 15px;font-weight: 100;">
							<span>提示：金额实际入账时，需收取40%的相关费用。</span>
						</div>
					</div>
					<div class="row clearfix">
						<div class="col-md-12 column" id="rpp">
							<!--数据列表-->
							<table class="table table-bordered table-striped table-hover dataTable">
								<thead>
									<tr>
										<th class="text-center sorting_asc">送礼物的人</th>
										<th class="text-center sorting_desc">礼物类型</th>
										<th class="text-center sorting_asc sorting_asc_disabled">时间</th>
										<th class="text-center sorting_desc sorting_desc_disabled">数量</th>
										<th class="text-center sorting">总金额</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="r in rechargeList.list">
										<td class="text-center">{{r.wxId}}</td>
										<td class="text-center">{{r.giftId}}</td>
										<td class="text-center">{{r.giftTime}}</td>
										<td class="text-center">{{r.giftNum}}</td>
										<td class="text-center">{{r.totalMoney}}</td>
									</tr>

								</tbody>
							</table>
							<div class="box-footer">
								<div class="pull-left">
									<div class="form-group form-inline">
										总共{{rechargeList.pages}}页 &nbsp; &nbsp; 共{{rechargeList.total}}条数据
										&nbsp; &nbsp; 每页{{rechargeList.pageSize}} 条
										&nbsp; &nbsp; &nbsp; 当前第{{rechargeList.pageNum}}页
									</div>
								</div>
								<div class="box-tools pull-right">
									<ul class="pagination">
										<li v-if="rechargeList.pageNum > 1">
											<a href="#" @click="method(1)" aria-label="Previous">首页</a>
										</li>
										<li v-if="rechargeList.pageNum > 1"><a href="javascript:void(0)" @click="method(rechargeList.prePage)">上一页</a></li>
										<li v-for="navigatepageNums in rechargeList.navigatepageNums">
											<a a href="javascript:void(0)" @click="method(navigatepageNums)">{{navigatepageNums}}</a>
										</li>
										<li v-if="rechargeList.pageNum < rechargeList.pages"><a href="javascript:void(0)" @click="method(rechargeList.nextPage)">下一页</a></li>
										<li v-if="rechargeList.pageNum < rechargeList.pages">
											<a href="javascript:void(0)" aria-label="Next" @click="method(rechargeList.pages)">尾页</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		//活动id
		var activityId = localStorage.getItem("activityId");
		new Vue({
			el: '#rpp',
			data: {
				rechargeList: [],
			},
			created: function() {
				//为了在内部函数能使用外部函数的this对象，要给它赋值了一个名叫self的变量。
				var self = this;
				$.ajax({
					/*本地url*/
					url: '/server/gift/getGiftByActivityId?activityId=' + activityId,
					type: 'get',
					data: {},
					dataType: 'json'
				}).then(function(res) {
					console.log(res);
					//把从json获取的数据赋值给数组
					self.rechargeList = res.data;
				}).fail(function() {
					console.log('失败');
				})
			},
		});
	</script>
</html>
